<template>
  <!-- 首页面板 -->
  <div class="dashboard-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-content">
            <div class="card-header">
              <span>考试总数</span>
              <el-tooltip content="查看详情" placement="top">
                <el-icon><InfoFilled /></el-icon>
              </el-tooltip>
            </div>
            <div class="card-value">126</div>
            <div class="card-footer">
              <div class="trend">
                <span>本月新增</span>
                <span class="up">12 <el-icon><ArrowUp /></el-icon></span>
              </div>
              <div class="trend">
                <span>进行中</span>
                <span class="normal">8</span>
              </div>
            </div>
            <div class="card-extra">
              <span>已完成</span>
              <span>118</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-content">
            <div class="card-header">
              <span>参考人数</span>
              <el-tooltip content="查看详情" placement="top">
                <el-icon><InfoFilled /></el-icon>
              </el-tooltip>
            </div>
            <div class="card-value">8,846</div>
            <div class="card-chart">
              <div class="chart-placeholder purple-chart">
                <div class="mini-line-chart">
                  <div class="line-point" style="left: 10%; bottom: 20%"></div>
                  <div class="line-point" style="left: 25%; bottom: 40%"></div>
                  <div class="line-point" style="left: 40%; bottom: 60%"></div>
                  <div class="line-point" style="left: 55%; bottom: 45%"></div>
                  <div class="line-point" style="left: 70%; bottom: 80%"></div>
                  <div class="line-point" style="left: 85%; bottom: 70%"></div>
                </div>
              </div>
            </div>
            <div class="card-extra">
              <span>今日参考</span>
              <span>234</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-content">
            <div class="card-header">
              <span>题库数量</span>
              <el-tooltip content="查看详情" placement="top">
                <el-icon><InfoFilled /></el-icon>
              </el-tooltip>
            </div>
            <div class="card-value">6,560</div>
            <div class="card-chart">
              <div class="chart-placeholder blue-chart">
                <div class="mini-bar-chart">
                  <div class="mini-bar" style="height: 30%"></div>
                  <div class="mini-bar" style="height: 60%"></div>
                  <div class="mini-bar" style="height: 40%"></div>
                  <div class="mini-bar" style="height: 80%"></div>
                  <div class="mini-bar" style="height: 50%"></div>
                  <div class="mini-bar" style="height: 70%"></div>
                </div>
              </div>
            </div>
            <div class="card-extra">
              <span>本月新增</span>
              <span>156</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-content">
            <div class="card-header">
              <span>平均通过率</span>
              <el-tooltip content="查看详情" placement="top">
                <el-icon><InfoFilled /></el-icon>
              </el-tooltip>
            </div>
            <div class="card-value">78%</div>
            <div class="card-chart">
              <div class="progress-container">
                <div class="progress-bar" style="width: 78%"></div>
              </div>
            </div>
            <div class="card-extra">
              <div class="trend">
                <span>较上月</span>
                <span class="up">+5% <el-icon><ArrowUp /></el-icon></span>
              </div>
              <div class="trend">
                <span>优秀率</span>
                <span class="normal">32%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="16">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="chart-header">
              <div class="tabs">
                <span class="active-tab">考试参与度</span>
                <span>成绩分布</span>
              </div>
              <div class="time-selector">
                <span class="active-time">今日</span>
                <span>本周</span>
                <span>本月</span>
                <span>全年</span>
              </div>
            </div>
          </template>
          
          <div class="bar-chart">
            <div class="chart-placeholder" style="height: 300px;">
              <div class="mock-bar-chart">
                <div class="bar-group">
                  <div class="bar" style="height: 80%"></div>
                  <span class="bar-label">1月</span>
                </div>
                <div class="bar-group">
                  <div class="bar" style="height: 40%"></div>
                  <span class="bar-label">2月</span>
                </div>
                <div class="bar-group">
                  <div class="bar" style="height: 60%"></div>
                  <span class="bar-label">3月</span>
                </div>
                <div class="bar-group">
                  <div class="bar" style="height: 90%"></div>
                  <span class="bar-label">4月</span>
                </div>
                <div class="bar-group">
                  <div class="bar" style="height: 70%"></div>
                  <span class="bar-label">5月</span>
                </div>
                <div class="bar-group">
                  <div class="bar" style="height: 85%"></div>
                  <span class="bar-label">6月</span>
                </div>
                <div class="bar-group">
                  <div class="bar" style="height: 50%"></div>
                  <span class="bar-label">7月</span>
                </div>
                <div class="bar-group">
                  <div class="bar" style="height: 60%"></div>
                  <span class="bar-label">8月</span>
                </div>
                <div class="bar-group">
                  <div class="bar" style="height: 75%"></div>
                  <span class="bar-label">9月</span>
                </div>
                <div class="bar-group">
                  <div class="bar" style="height: 65%"></div>
                  <span class="bar-label">10月</span>
                </div>
                <div class="bar-group">
                  <div class="bar" style="height: 80%"></div>
                  <span class="bar-label">11月</span>
                </div>
                <div class="bar-group">
                  <div class="bar" style="height: 70%"></div>
                  <span class="bar-label">12月</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card shadow="hover" class="rank-card">
          <template #header>
            <div class="card-header">
              <span>考试排行榜</span>
              <el-icon><More /></el-icon>
            </div>
          </template>
          <div class="rank-list">
            <div class="rank-item">
              <span class="rank first">1</span>
              <span class="name">JavaScript基础测试</span>
              <span class="value">1,234人</span>
            </div>
            <div class="rank-item">
              <span class="rank second">2</span>
              <span class="name">Vue.js进阶考试</span>
              <span class="value">1,156人</span>
            </div>
            <div class="rank-item">
              <span class="rank third">3</span>
              <span class="name">数据库设计</span>
              <span class="value">998人</span>
            </div>
            <div class="rank-item">
              <span class="rank">4</span>
              <span class="name">算法与数据结构</span>
              <span class="value">876人</span>
            </div>
            <div class="rank-item">
              <span class="rank">5</span>
              <span class="name">网络安全基础</span>
              <span class="value">654人</span>
            </div>
            <div class="rank-item">
              <span class="rank">6</span>
              <span class="name">Python编程</span>
              <span class="value">543人</span>
            </div>
            <div class="rank-item">
              <span class="rank">7</span>
              <span class="name">项目管理</span>
              <span class="value">432人</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 底部功能区域 -->
    <el-row :gutter="20" class="bottom-row">
      <el-col :xs="24" :md="12">
        <el-card shadow="hover" class="activity-card">
          <template #header>
            <div class="card-header">
              <span>最近考试动态</span>
              <el-button type="text" size="small">查看更多</el-button>
            </div>
          </template>
          <div class="exam-activities">
            <div class="activity-item">
              <div class="activity-info">
                <div class="activity-title">张三 完成了 JavaScript基础测试</div>
                <div class="activity-time">2分钟前</div>
              </div>
              <div class="activity-score">
                <el-tag type="success">85分</el-tag>
              </div>
            </div>
            <div class="activity-item">
              <div class="activity-info">
                <div class="activity-title">李四 开始了 Vue.js进阶考试</div>
                <div class="activity-time">5分钟前</div>
              </div>
              <div class="activity-score">
                <el-tag type="info">进行中</el-tag>
              </div>
            </div>
            <div class="activity-item">
              <div class="activity-info">
                <div class="activity-title">王五 完成了 数据库设计</div>
                <div class="activity-time">10分钟前</div>
              </div>
              <div class="activity-score">
                <el-tag type="warning">62分</el-tag>
              </div>
            </div>
            <div class="activity-item">
              <div class="activity-info">
                <div class="activity-title">赵六 完成了 算法与数据结构</div>
                <div class="activity-time">15分钟前</div>
              </div>
              <div class="activity-score">
                <el-tag type="success">92分</el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :md="12">
        <el-card shadow="hover" class="action-card">
          <template #header>
            <div class="card-header">
              <span>快速操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <div class="action-grid">
              <div class="action-item" @click="$router.push('/exam/create')">
                <el-icon size="24" color="#409eff"><DocumentAdd /></el-icon>
                <span>创建考试</span>
              </div>
              <div class="action-item" @click="$router.push('/question/create')">
                <el-icon size="24" color="#67c23a"><EditPen /></el-icon>
                <span>添加题目</span>
              </div>
              <div class="action-item" @click="$router.push('/exam/list')">
                <el-icon size="24" color="#e6a23c"><View /></el-icon>
                <span>查看考试</span>
              </div>
              <div class="action-item" @click="$router.push('/result')">
                <el-icon size="24" color="#f56c6c"><DataAnalysis /></el-icon>
                <span>考试结果</span>
              </div>
              <div class="action-item" @click="$router.push('/question/list')">
                <el-icon size="24" color="#909399"><Collection /></el-icon>
                <span>题库管理</span>
              </div>
              <div class="action-item" @click="$router.push('/user')" v-if="authStore.hasRole('ADMIN')">
                <el-icon size="24" color="#409eff"><UserFilled /></el-icon>
                <span>用户管理</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, computed } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { permissionApi } from '@/api/permissions'

const authStore = useAuthStore()

const userName = computed(() => {
  return authStore.user?.fullName || authStore.user?.username || '用户'
})

onMounted(async () => {
  console.log('[Dashboard] Component mounted, user:', userName.value)
  console.log('[Dashboard] Auth state:', {
    user: authStore.user,
    token: authStore.token ? 'exists' : 'missing'
  })
  
  // 强制调用菜单接口
  if (authStore.user && authStore.token) {
    console.log('[Dashboard] Forcing menu API call...')
    try {
      const response = await permissionApi.getMenuTree()
      console.log('[Dashboard] Menu API response:', response)
    } catch (error) {
      console.error('[Dashboard] Failed to load menus:', error)
    }
  } else {
    console.warn('[Dashboard] No auth info available for menu loading')
  }
})
</script>

<style scoped>
.dashboard-container {
  padding: 0;
}

/* 统一卡片高度 */
.data-card {
  height: 210px;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.card-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.card-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin: 8px 0;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
}

.trend {
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 4px;
}

.trend span:first-child {
  color: #909399;
}

.trend .up {
  color: #67c23a;
}

.trend .down {
  color: #f56c6c;
}

.trend .normal {
  color: #409eff;
}

.card-extra {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}

.card-chart {
  height: 50px;
  margin: 8px 0;
  position: relative;
}

.chart-placeholder {
  height: 100%;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.purple-chart {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.blue-chart {
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
}

.mini-line-chart {
  position: relative;
  height: 100%;
}

.line-point {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
}

.mini-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 100%;
  padding: 8px;
}

.mini-bar {
  width: 6px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
}

.progress-container {
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin: 16px 0;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #409eff 0%, #36cfc9 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* 图表区域统一高度 */
.chart-row {
  margin: 20px 0;
}

.chart-card,
.rank-card {
  height: 420px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tabs {
  display: flex;
  gap: 20px;
}

.tabs span {
  cursor: pointer;
  color: #909399;
  font-size: 14px;
}

.active-tab {
  color: #303133 !important;
  font-weight: 500;
  position: relative;
}

.active-tab::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 2px;
  background: #409eff;
}

.time-selector {
  display: flex;
  gap: 15px;
}

.time-selector span {
  cursor: pointer;
  color: #909399;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}

.active-time {
  background: #409eff !important;
  color: white !important;
}

.mock-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 100%;
  padding: 20px;
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.bar {
  width: 20px;
  background: linear-gradient(180deg, #409eff 0%, #36cfc9 100%);
  border-radius: 2px 2px 0 0;
  margin-bottom: 8px;
}

.bar-label {
  font-size: 12px;
  color: #909399;
}

/* 排行榜 */
.rank-list {
  padding: 0;
  height: calc(100% - 60px);
  overflow-y: auto;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.rank-item:last-child {
  border-bottom: none;
}

.rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  margin-right: 12px;
  background: #f0f0f0;
  color: #666;
}

.rank.first {
  background: #ffd700;
  color: white;
}

.rank.second {
  background: #c0c0c0;
  color: white;
}

.rank.third {
  background: #cd7f32;
  color: white;
}

.name {
  flex: 1;
  font-size: 14px;
  color: #303133;
}

.value {
  font-size: 14px;
  color: #409eff;
  font-weight: 500;
}

/* 底部区域统一高度 */
.bottom-row {
  margin-top: 20px;
}

.activity-card,
.action-card {
  height: 380px;
}

.exam-activities {
  height: calc(100% - 60px);
  overflow-y: auto;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-info {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #909399;
}

.activity-score {
  margin-left: 12px;
}

/* 快速操作 */
.quick-actions {
  height: calc(100% - 60px);
  display: flex;
  align-items: center;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
  transform: translateY(-2px);
}

.action-item span {
  margin-top: 8px;
  font-size: 14px;
  color: #303133;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .data-card {
    height: 160px;
  }
  
  .chart-card,
  .rank-card,
  .activity-card,
  .action-card {
    height: auto;
    min-height: 300px;
  }
  
  .action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .chart-header {
    flex-direction: column;
    gap: 12px;
  }
  
  .time-selector {
    flex-wrap: wrap;
  }
}
</style>









